<!--
 * @Author: your name
 * @Date: 2020-07-30 10:48:23
 * @LastEditTime: 2020-08-03 16:55:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devops\VueElementUINew\src\components\QTree\index.vue
--> 

<template>
  <div class="q-tree-container">
    <el-autocomplete
      v-model="searchKey"
      size="mini"
      :fetch-suggestions="querySearch"
      :placeholder="placeholder"
      :trigger-on-focus="false"
      @select="handleSelect"
    ><i slot="prefix" class="el-input__icon el-icon-search"/></el-autocomplete>
    <el-tree
      :data="data"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :check-on-click-node="false"
      :highlight-current="true"
      @current-change="currentChange"
      @check-change="checkChange"
      @node-click="nodeClick"
    >
      <div
        class="custom-tree-node"
        slot-scope="{ node, data }"
      >
        <span
          @mouseenter="mouseenter($event, data)"
          @mouseleave="mouseleave($event, data)"
        >
          <span>{{ node.label }}</span>
          <span>
            <i class="el-icon-plus" v-show="data.id === root || hoverNodeId === data.id" @click="() => append(data)"></i>
            <el-dropdown
              @command="handleCommand"
              placement="bottom"
              v-show="hoverNodeId === data.id && data.id !== root"
            >
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="rename">重命名</el-dropdown-item>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- <i class="el-icon-more" @click="() => remove(node, data)"></i> -->
          </span>
        </span>
      </div>
    </el-tree>
  </div>
</template>

<script>
  let id = 1000;

  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      },
      placeholder: {
        type: String,
        default: '请输入搜索内容'
      },
    },
    data() {
      return {
        searchKey: '',
        hoverNodeId: ''
      }
    },
    computed: {
      root() {
        return this.data[0].id
      }
    },
    methods: {
      append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      currentChange(data, node) {
        console.log('currentChange', data, node)
      },

      checkChange(a, b, c) {
        console.log('checkChange', a, b, c)
      },

      nodeClick(data, node, dom) {
        console.log('nodeClick', data, node, dom)
      },

      querySearch(queryString, cb) {
        console.log('querySearch', queryString, cb)
        // var restaurants = this.restaurants;
        // var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // // 调用 callback 返回建议列表的数据
        let res = [{
          value: '测试1'
        }, {
          value: '测试2'
        }, {
          value: '测试3'
        }]
        cb(res);
      },
      handleSelect(item) {
        console.log('handleSelect item', item)
      },
      handleCommand(command) {
        switch (command) {
          case 'rename':
            // todo
            break;
          case 'edit':
            // todo
            break;
          case 'delete':
            // todo
            break;
          default:
            break;
        }
      },
      mouseenter(evt, node) {
        this.hoverNodeId = node.id
      },
      mouseleave(evt, node) {
        this.hoverNodeId = ''
      }
    }
  };
</script>

<style lang="scss" scoped>
  .q-tree-container {
    font-size: 12px;
    .el-autocomplete {
      width: 100%;
    }
  }
  .custom-tree-node {
    flex: 1;
    
    font-size: 14px;
    padding-right: 8px;
    line-height: 1;
    & > span {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>